<template>
  <div class="large-screen-group">
    <div class="title">
      {{ LeftTitle.title }}
    </div>
    <div class="now">
      <div class="now-cont1 now-item" :class="color">
        <div class="icon">
          <img :src="images" alt="" />
        </div>
        <div class="text">
          <p>{{ LeftTitle.smallTitle }}</p>
          <!-- <span>{{ this.grouplist.EnterpriseCount }}</span> -->
        </div>
      </div>
      <div class="now-cont2 now-item2">
        <div>
          <on-line color="stay" :sum="grouplist.total"></on-line>
        </div>
      </div>
      <div class="now-cont3 now-item">
        <div>
          <oilbox color="important" :sum="grouplist?grouplist.keyEnterprise:0"></oilbox>
        </div>
        <!-- <div> -->
          <!-- <oilbox color="typical" :sum="grouplist.industryMap?grouplist.industryMap.天津市典型行业:0"></oilbox> -->
        <!-- </div> -->
        <div>
          <oilbox color="major" :sum="grouplist?grouplist.frequentVehicleUser:0"></oilbox>
        </div>
        <div>
          <oilbox color="other" :sum="grouplist?grouplist.otherEnterprise:0"></oilbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import onLine from "./onLine";
import oilbox from "./oilbox";
import GaugeGroup from "./GaugeGroup";
import GaugeLongGroup from "./GaugeLongGroup";
/*import countTo from 'vue-count-to'*/

export default {
  name: "ALargeScreenGroup",
  components: {
    onLine,
    oilbox,
    GaugeGroup,
    GaugeLongGroup,
    /* countTo*/
  },
  data() {
    return {
      /*gauge-long-group*/
    };
  },
  computed: {},
  props: {
    LeftTitle: {
      type: Object,
      default: {},
    },
    grouplist: {
      type: Object,
      default: {},
    },
    
    color: {
      type: String,
      default: "now1",
    },
    images: {
      type: String,
      default: "",
    },
  },
  mounted() {
  },
  methods: {
    myCount(num) {
      return this.myfun.myformat(num);
    },
    PiePage(data, ref) {
      let myChart4 = this.$echarts.getInstanceByDom(ref);
      if (myChart4 == undefined) {
        myChart4 = this.$echarts.init(ref);
      }
      let Opt;
      Opt = {
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            clockwise: true,
            left: 9,
            top: 10,
            width: 50,
            height: 50,
            center: ["50%", "50%"],
            radius: ["60%", "100%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            emphasis: {
              scale: true,
              scaleSize: 3,
            },
            /*selectedOffset : -30,*/
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
        color: [
          "#07e7f3",
          "#07f3b3",
          "#1d9eef",
          "#e9b015",
          "#5d4ef2",
          "#e915d8",
        ],
      };
      myChart4.setOption(Opt);
    },
  },
  watch: {
    LeftTitle() {
      // console.log(this.LeftTitle)
    },
    grouplist: {
      /*immediate:true,*/
      deep: true,
      handler(newValue, oldValue) {
        // console.log(newValue,oldValue)
      },
    },
  },
};
</script>

<style scoped lang="scss">
.large-screen-group {
  .title {
    font-size: 20px;
    letter-spacing: 0px;
    color: #f0f6fb;
    margin-bottom: 20px;
    width: 100%;
  }
  .now {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .now-item {
      width: 50%;
      margin-bottom: 25px;
      &:nth-last-child(1),
      &:nth-last-child(2) {
        margin-bottom: 0px;
      }
    }
    .now-item2 {
      margin-left: 40px;
      width: 100px;
      margin-bottom: 25px;
      &:nth-last-child(1),
      &:nth-last-child(2) {
        margin-bottom: 0px;
      }
    }
    .now-cont1 {
      padding-left: 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 60%;
      .icon {
        width: 67px;
        height: 67px;
        // margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .text {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
        p {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0px;
          font-size: 20px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
        span {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 26px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 1;
          letter-spacing: 0px;
          color: #e6e6e6;
          margin-top: 12px;
        }
      }
      &.now1 {
        p {
          text-shadow: #3fd9e3 1px 0 0, #3fd9e3 0 1px 0, #3fd9e3 -1px 0 0,
            #3fd9e3 0 -1px 0;
        }
      }
      &.now2 {
        p {
          text-shadow: #419ce4 1px 0 0, #419ce4 0 1px 0, #419ce4 -1px 0 0,
            #419ce4 0 -1px 0;
        }
      }
      &.now3 {
        p {
          text-shadow: #e38b45 1px 0 0, #e38b45 0 1px 0, #e38b45 -1px 0 0,
            #e38b45 0 -1px 0;
        }
      }
    }
    .now-cont2 {
      height: 67px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      div {
        width:100%;
        height: 100%;
        &:nth-child(even) {
          margin-left: 25px;
        }
      }
    }
    .now-cont3 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        width: 120px;
        height: 120px;
        margin-left: 20px;
      }
    }
    .now-cont4 {
      padding-left: 22px;
    }
  }
}
</style>
